<!DOCTYPE html>
<html lang="en">

<head>
    <!--
        ===
        This comment should NOT be removed.

        Charisma v2.0.0

        Copyright 2012-2014 Muhammad Usman
        Licensed under the Apache License v2.0
        http://www.apache.org/licenses/LICENSE-2.0

        http://usman.it
        http://twitter.com/halalit_usman
        ===
    -->
    <meta charset="utf-8">
    <title>Admin</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Charisma, a fully featured, responsive, HTML5, Bootstrap admin template.">
    <meta name="author" content="Muhammad Usman">

    <!-- The styles -->
    <link id="bs-css" href="css/bootstrap-cerulean.min.css" rel="stylesheet">

    <link href="css/charisma-app.css" rel="stylesheet">
    <link href='bower_components/fullcalendar/dist/fullcalendar.css' rel='stylesheet'>
    <link href='bower_components/fullcalendar/dist/fullcalendar.print.css' rel='stylesheet' media='print'>
    <link href='bower_components/chosen/chosen.min.css' rel='stylesheet'>
    <link href='bower_components/colorbox/example3/colorbox.css' rel='stylesheet'>
    <link href='bower_components/responsive-tables/responsive-tables.css' rel='stylesheet'>
    <link href='bower_components/bootstrap-tour/build/css/bootstrap-tour.min.css' rel='stylesheet'>
    <link href='css/jquery.noty.css' rel='stylesheet'>
    <link href='css/noty_theme_default.css' rel='stylesheet'>
    <link href='css/elfinder.min.css' rel='stylesheet'>
    <link href='css/elfinder.theme.css' rel='stylesheet'>
    <link href='css/jquery.iphone.toggle.css' rel='stylesheet'>
    <link href='css/uploadify.css' rel='stylesheet'>
    <link href='css/animate.min.css' rel='stylesheet'>
    <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
    <link rel="stylesheet" href="css/jquery.fileupload.css">

    <!-- jQuery -->
    <script src="bower_components/jquery/jquery.min.js"></script>

    <!-- The HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- The fav icon -->
    <link rel="shortcut icon" href="img/favicon.ico">
	<script type="text/javascript">
		$(document).ready(function() {
			//$("#upload-pic").hide();
			//$("#upload-file").hide();
		});
		function addNewCloth() {
			var _clothId = $("#cloth-id").val();
			var _brand = $("#brand").val();
			var _color = $("#color").val();
			var _size = $("#size").val();
			var _designer = $("#designer").val();
			var _seasonAndYear = $("#season-and-year").val();
			$.ajax({
				type:"POST",
				url:"addNewClothSubmit.html",
				data:{clothId:_clothId,brand:_brand,color:_color,size:_size,designer:_designer,seasonAndYear:_seasonAndYear},
				dataType:"json",
				success:function(data) {
					alert("Creating new cloth succeeds.");
					$("#add-cloth-btn").hide();
					$("#upload-pic").fadeIn();
					$("#upload-file").fadeIn();
				}
			});
		}
	</script>
</head>

<body>
    <!-- topbar starts -->
    <div class="navbar navbar-default" role="navigation">

        <div class="navbar-inner">
            <button type="button" class="navbar-toggle pull-left animated flip">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="addNewCloth.html"> <img alt="Charisma Logo" src="img/logo20.png" class="hidden-xs" />
                <span>Admin</span>
            </a>

            <!-- user dropdown starts -->
            <div class="btn-group pull-right">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="glyphicon glyphicon-user"></i><span class="hidden-sm hidden-xs"> admin</span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="logout.html">Logout</a>
                    </li>
                </ul>
            </div>
            <!-- user dropdown ends -->

            <!-- theme selector starts -->
            <div class="btn-group pull-right theme-container animated tada">
                <button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <i class="glyphicon glyphicon-tint"></i><span class="hidden-sm hidden-xs"> Change Theme / Skin</span>
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" id="themes">
                    <li><a data-value="classic" href="#"><i class="whitespace"></i> Classic</a>
                    </li>
                    <li><a data-value="cerulean" href="#"><i class="whitespace"></i> Cerulean</a>
                    </li>
                    <li><a data-value="cyborg" href="#"><i class="whitespace"></i> Cyborg</a>
                    </li>
                    <li><a data-value="simplex" href="#"><i class="whitespace"></i> Simplex</a>
                    </li>
                    <li><a data-value="darkly" href="#"><i class="whitespace"></i> Darkly</a>
                    </li>
                    <li><a data-value="lumen" href="#"><i class="whitespace"></i> Lumen</a>
                    </li>
                    <li><a data-value="slate" href="#"><i class="whitespace"></i> Slate</a>
                    </li>
                    <li><a data-value="spacelab" href="#"><i class="whitespace"></i> Spacelab</a>
                    </li>
                    <li><a data-value="united" href="#"><i class="whitespace"></i> United</a>
                    </li>
                </ul>
            </div>
            <!-- theme selector ends -->


        </div>
    </div>
    <!-- topbar ends -->
    <div class="ch-container">
        <div class="row">

            <!-- left menu starts -->
            <div class="col-sm-2 col-lg-2">
                <div class="sidebar-nav">
                    <div class="nav-canvas">
                        <div class="nav-sm nav nav-stacked">

                        </div>
                        <ul class="nav nav-pills nav-stacked main-menu">
                            <li class="nav-header">Main</li>


                            <li class="active"><a class="ajax-link " href="addNewCloth.html"><i
                                    class="glyphicon glyphicon-edit"></i><span> upload clothes</span></a>
                            </li>



                            <li><a class="ajax-link" href="manage.html"><i
                                    class="glyphicon glyphicon-align-justify"></i><span> clothes manage </span></a>
                            </li>

							<li><a class="ajax-link" href="keymanage.html"><i
                                    class="glyphicon glyphicon-align-justify"></i><span> key manage </span></a>
                            </li>



                        </ul>

                    </div>
                </div>
            </div>
            <!--/span-->
            <!-- left menu ends -->

            <noscript>
                <div class="alert alert-block col-md-12">
                    <h4 class="alert-heading">Warning!</h4>

                    <p>You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> enabled to use this site.</p>
                </div>
            </noscript>

            <div id="content" class="col-lg-10 col-sm-10">
                <!-- content starts -->


                <div>
                    <ul class="breadcrumb">
                        <li>
                            <a href="index.html">index</a>
                        </li>
                        <li>
                            <a href="#">upload clothes</a>
                        </li>
                    </ul>
                </div>

                <div class="row">
                    <div class="box col-md-12">
                        <div class="box-inner">
                            <div class="box-header well" data-original-title="">
                                <h2><i class="glyphicon glyphicon-star-empty"></i> Upload</h2>

                                <div class="box-icon">

                                    <a href="#" class="btn btn-minimize btn-round btn-default"><i
                            class="glyphicon glyphicon-chevron-up"></i></a>

                                </div>
                            </div>

                            <div class="box-content">
                                <!-- put your content here -->
                                <form class="form-horizontal" role="form" method="post" action="addNewClothSubmit.html" id="add-new-cloth-form">


                                    <div class="form-group ">
                                        <label for="clothes_id" class="col-sm-2 control-label">Clothes ID</label>
                                        <div class="col-sm-5">
                                            <input required type="text" name="clothId" class="form-control normal-input" id="cloth-id" placeholder="clothes id">
                                            <p class="help-block" style="display:none"></p>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="brand" class="col-sm-2 control-label">Brand</label>
                                        <div class="col-sm-5">
                                            <input required type="text" name="brand" class="form-control normal-input" id="brand" placeholder="brand">
                                            <p class="help-block" style="display:none"></p>
                                        </div>

                                    </div>
                                    
                                    <div class="form-group">
                                        <label for="color" class="col-sm-2 control-label">Color</label>
                                        <div class="col-sm-5">
                                            <input required type="text" name="color" class="form-control normal-input" id="color" placeholder="color">
                                            <p class="help-block" style="display:none"></p>
                                        </div>

                                    </div>



                                    <div class="form-group">
                                        <label for="size" class="col-sm-2 control-label">Size</label>
                                        <div class="col-sm-5">
                                            <input required type="text" name="size" class="form-control normal-input" id="size" placeholder="size">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="designer" class="col-sm-2 control-label">Designer</label>
                                        <div class="col-sm-5">
                                            <input required type="text" name="designer" class="form-control normal-input" id="designer" placeholder="designer">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <label for="season_and_year" class="col-sm-2 control-label">Season and Year</label>
                                        <div class="col-sm-5">
                                            <input required type="text" name="seasonAndYear" class="form-control normal-input" id="season-and-year" placeholder="season and year">
                                        </div>
                                    </div>

                





                                    <div class="form-group">
                                        <div class="col-sm-offset-2 col-sm-10">
                                            <button type="button" class="btn btn-primary" id="add-cloth-btn" onclick="addNewCloth();">submit</button>
                                        </div>
                                    </div>
                                </form>
                                <br>



                            </div>


                        </div>
                    </div>
                </div>
                <!--/row-->



                <div class="row" id="upload-pic" style="display:none">
                    <div class="box col-md-12">
                        <div class="box-inner">
                            <div class="box-header well" data-original-title="">
                                <h2><i class="glyphicon glyphicon-star-empty"></i> UploadPictures</h2>

                                <div class="box-icon">

                                    <a href="#" class="btn btn-minimize btn-round btn-default"><i
                            class="glyphicon glyphicon-chevron-up"></i></a>

                                </div>
                            </div>

                            <div class="box-content">
                                <!-- put your content here -->

                                <br>
                                <div class="row">
                                    <!-- The fileinput-button span is used to style the file input field as button -->
                                    <div class="col-lg-2"></div>
                                    <span class="btn btn-success fileinput-button">
                            <i class="glyphicon glyphicon-plus"></i>
                            <span>select pictures</span>
                                    <!-- The file input field used as target for the file upload widget -->
                                    <input id="fileupload" type="file" name="file" >
                                    </span>
                                    <br>
                                    <br>
                                    <!-- The global progress bar -->
                                    	 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
										  <div class="modal-dialog">
										    <div class="modal-content">
										      <div class="modal-header">
										        <h4 class="modal-title" id="myModalLabel">uploading file...</h4>
										      </div>
										      <div class="modal-body">
			                                    <div id="progress" class="progress">
		                                        <div class="progress-bar progress-bar-success"></div>
										      </div>
										    </div>
										  </div>
										</div>
                                    </div>
                                    
                                    <!-- The container for the uploaded files -->
                                    <div id="files" class="files"></div>
                                </div>


                            </div>
                        </div>
                    </div>

                </div>


                <div class="row" id="upload-file" style="display:none">
                    <div class="box col-md-12">
                        <div class="box-inner">
                            <div class="box-header well" data-original-title="">
                                <h2><i class="glyphicon glyphicon-star-empty"></i> UploadFile</h2>

                                <div class="box-icon">

                                    <a href="#" class="btn btn-minimize btn-round btn-default"><i
                            class="glyphicon glyphicon-chevron-up"></i></a>

                                </div>
                            </div>

                            <div class="box-content">
                                <!-- put your content here -->

                                <br>
                                <div class="row">
                                    <!-- The fileinput-button span is used to style the file input field as button -->
                                    <div class="col-lg-2"></div>
                                    <span class="btn btn-success fileinput-button">
        <i class="glyphicon glyphicon-plus"></i>
        <span>select files</span>
                                    <!-- The file input field used as target for the file upload widget -->
                                    <input id="fileupload1" type="file" name="file1" >
                                    </span>
                                    <br>
                                    <br>
                                    <!-- The global progress bar -->
                                    <div id="progress1" class="progress1">
                                        <div class="progress-bar progress-bar-success"></div>
                                    </div>
                                    <!-- The container for the uploaded files -->
                                    <div id="files1" class="files"></div>
                                </div>


                            </div>
                        </div>
                    </div>
                </div>



                <!-- content ends -->
            </div>
            <!--/#content.col-md-0-->
        </div>
        <!--/fluid-row-->

        <!-- Ad, you can remove it -->
        <!-- Ad ends -->

        <hr>



        <footer class="row">

        </footer>

    </div>
    <!--/.fluid-container-->

    <!-- external javascript -->

    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- library for cookie management -->
    <script src="js/jquery.cookie.js"></script>
    <!-- calender plugin -->
    <script src='bower_components/moment/min/moment.min.js'></script>
    <script src='bower_components/fullcalendar/dist/fullcalendar.min.js'></script>
    <!-- data table plugin -->
    <script src='js/jquery.dataTables.min.js'></script>

    <!-- select or dropdown enhancer -->
    <script src="bower_components/chosen/chosen.jquery.min.js"></script>
    <!-- plugin for gallery image view -->
    <script src="bower_components/colorbox/jquery.colorbox-min.js"></script>
    <!-- notification plugin -->
    <script src="js/jquery.noty.js"></script>
    <!-- library for making tables responsive -->
    <script src="bower_components/responsive-tables/responsive-tables.js"></script>
    <!-- tour plugin -->
    <script src="bower_components/bootstrap-tour/build/js/bootstrap-tour.min.js"></script>
    <!-- star rating plugin -->
    <script src="js/jquery.raty.min.js"></script>
    <!-- for iOS style toggle switch -->
    <script src="js/jquery.iphone.toggle.js"></script>
    <!-- autogrowing textarea plugin -->
    <script src="js/jquery.autogrow-textarea.js"></script>
    <!-- multiple file upload plugin -->
    <script src="js/jquery.uploadify-3.1.min.js"></script>
    <!-- history.js for cross-browser state change on ajax -->
    <script src="js/jquery.history.js"></script>
    <!-- application script for Charisma demo -->
    <script src="js/charisma.js"></script>
    <script src="js/vendor/jquery.ui.widget.js"></script>
    <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
    <script src="js/load-image.min.js"></script>
    <!-- The Canvas to Blob plugin is included for image resizing functionality -->
    <script src="js/canvas-to-blob.min.js"></script>
    <!-- Bootstrap JS is not required, but included for the responsive demo navigation -->
    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
    <script src="js/jquery.iframe-transport.js"></script>
    <!-- The basic File Upload plugin -->
    <script src="js/jquery.fileupload.js"></script>
    <!-- The File Upload processing plugin -->
    <script src="js/jquery.fileupload-process.js"></script>
    <!-- The File Upload image preview & resize plugin -->
    <script src="js/jquery.fileupload-image.js"></script>
    <!-- The File Upload audio preview plugin -->
    <script src="js/jquery.fileupload-audio.js"></script>
    <!-- The File Upload video preview plugin -->
    <script src="js/jquery.fileupload-video.js"></script>
    <!-- The File Upload validation plugin -->
    <script src="js/jquery.fileupload-validate.js"></script>
    <script>
    /*jslint unparam: true, regexp: true */
    /*global window, $ */
    $(function() {
        'use strict';
        // Change this to the location of your server-side upload handler:
        /*
        	var url = window.location.hostname === 'blueimp.github.io' ?
            '//jquery-file-upload.appspot.com/' : 'server/php/',
            */
            var url = 'upload/uploadPicSubmit.html',
            uploadButton = $('<button/>')
            .addClass('btn btn-primary')
            .prop('disabled', true)
            .text('Processing...')
            .on('click', function() {
                var $this = $(this),
                    data = $this.data();
                $this
                    .off('click')
                    .text('Abort')
                    .on('click', function() {
                        $this.remove();
                        data.abort();
                    });
                data.submit().always(function() {
                    $this.remove();
                });
                $("#myModal").modal('show');
            });
        $('#fileupload').fileupload({
                url: url,
                dataType: 'json',
                autoUpload: false,
                acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
                maxFileSize: 1000000, // 1 MB
                // Enable image resizing, except for Android and Opera,
                // which actually support image resizing, but fail to
                // send Blob objects via XHR requests:
                disableImageResize: /Android(?!.*Chrome)|Opera/
                    .test(window.navigator.userAgent),
                previewMaxWidth: 100,
                previewMaxHeight: 100,
                previewCrop: true
            }).on('fileuploadadd', function(e, data) {
                data.context = $('<div/>').appendTo('#files');
                $.each(data.files, function(index, file) {
                    var node = $('<p/>')
                        .append($('<span/>').text(file.name));
                    if (!index) {
                        node
                            .append('<br>')
                            .append(uploadButton.clone(true).data(data));
                    }
                    node.appendTo(data.context);
                });
            }).on('fileuploadprocessalways', function(e, data) {
                var index = data.index,
                    file = data.files[index],
                    node = $(data.context.children()[index]);
                if (file.preview) {
                    node
                        .prepend('<br>')
                        .prepend(file.preview);
                }
                if (file.error) {
                    node
                        .append('<br>')
                        .append($('<span class="text-danger"/>').text(file.error));
                }
                if (index + 1 === data.files.length) {
                    data.context.find('button')
                        .text('Upload')
                        .prop('disabled', !!data.files.error);
                }
            }).on('fileuploadprogressall', function(e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }).on('fileuploaddone', function(e, data) {
            	/*
                $.each(data.result.files, function(index, file) {
                    if (file.url) {
                        var link = $('<a>')
                            .attr('target', '_blank')
                            .prop('href', file.url);
                        $(data.context.children()[index])
                            .wrap(link);
                    } else if (file.error) {
                        var error = $('<span class="text-danger"/>').text(file.error);
                        $(data.context.children()[index])
                            .append('<br>')
                            .append(error);
                    }
                });*/
                   alert("upload completed.");
                   $("#myModal").modal('hide');
                   $('#progress .progress-bar').css(
                            'width',
                            '0%'
                    );
            }).on('fileuploadfail', function(e, data) {
                $.each(data.files, function(index, file) {
                    var error = $('<span class="text-danger"/>').text('File upload failed.');
                    $(data.context.children()[index])
                        .append('<br>')
                        .append(error);
                });
                $("#myModal").modal('hide');
            	$('#progress .progress-bar').css(
                        'width',
                        '0%'
                );
            }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
    </script>
<script>
/*jslint unparam: true, regexp: true */
/*global window, $ */
$(function () {
    'use strict';
    // Change this to the location of your server-side upload handler:
    /*
    	var url = window.location.hostname === 'blueimp.github.io' ?
                '//jquery-file-upload.appspot.com/' : 'server/php/',
                */
        var url = 'upload/uploadFileSubmit.html',
        uploadButton = $('<button/>')
            .addClass('btn btn-primary')
            .prop('disabled', true)
            .text('Processing...')
            .on('click', function () {
                var $this = $(this),
                    data = $this.data();
                $this
                    .off('click')
                    .text('Abort')
                    .on('click', function () {
                        $this.remove();
                        data.abort();
                    });
                data.submit().always(function () {
                    $this.remove();
                });
                $("#myModal").modal('show');
            });
    $('#fileupload1').fileupload({
        url: url,
        dataType: 'json',
        autoUpload: false,
        maxFileSize: 100000000, // 1 MB
        // Enable image resizing, except for Android and Opera,
        // which actually support image resizing, but fail to
        // send Blob objects via XHR requests:
        disableImageResize: /Android(?!.*Chrome)|Opera/
            .test(window.navigator.userAgent),
        previewMaxWidth: 100,
        previewMaxHeight: 100,
        previewCrop: true
    }).on('fileuploadadd', function (e, data) {
        data.context = $('<div/>').appendTo('#files1');
        $.each(data.files, function (index, file) {
            var node = $('<p/>')
                    .append($('<span/>').text(file.name));
            if (!index) {
                node
                    .append('<br>')
                    .append(uploadButton.clone(true).data(data));
            }
            node.appendTo(data.context);
        });
    }).on('fileuploadprocessalways', function (e, data) {
        var index = data.index,
            file = data.files[index],
            node = $(data.context.children()[index]);
        if (file.preview) {
            node
                .prepend('<br>')
                .prepend(file.preview);
        }
        if (file.error) {
            node
                .append('<br>')
                .append($('<span class="text-danger"/>').text(file.error));
        }
        if (index + 1 === data.files.length) {
            data.context.find('button')
                .text('Upload')
                .prop('disabled', !!data.files.error);
        }
    }).on('fileuploadprogressall', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('#progress .progress-bar').css(
            'width',
            progress + '%'
        );
    }).on('fileuploaddone', function (e, data) {
    	/*
        $.each(data.result.files, function (index, file) {
            if (file.url) {
                var link = $('<a>')
                    .attr('target', '_blank')
                    .prop('href', file.url);
                $(data.context.children()[index])
                    .wrap(link);
            } else if (file.error) {
                var error = $('<span class="text-danger"/>').text(file.error);
                $(data.context.children()[index])
                    .append('<br>')
                    .append(error);
            }
        });
    	*/
        alert("upload completed.")
        $("#myModal").modal('hide');
        $('#progress .progress-bar').css(
                'width',
                '0%'
        );
    }).on('fileuploadfail', function (e, data) {
        $.each(data.files, function (index, file) {
            var error = $('<span class="text-danger"/>').text('File upload failed.');
            $(data.context.children()[index])
                .append('<br>')
                .append(error);
        });
        $("#myModal").modal('hide');
        $('#progress .progress-bar').css(
                'width',
                '0%'
        );
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});
</script>

</body>

</html>
